<template>
    <div>
        <div class="top">
            <el-button id="white_list_info_back" type='text' @click="back" style="font-size: 14px;margin-bottom:10px">返回</el-button>
            <div class="content">
                <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                    <div class="title">房号信息</div>
                    <div class="form">
<!--                        <el-form-item label='单元名称' prop='id' v-show="false">-->
<!--                            <el-input id="white_list_info_id" v-model="form.id"></el-input>-->
<!--                        </el-form-item>-->
                        <el-form-item label="单元名称" prop="unitName">
                            <el-input id="white_list_info_jt_product_nbr" v-model="form.unitName" @click.native="showTab" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="幢号" prop="buildNum">
                            <el-input id="white_list_info_jt_product_name" v-model="form.buildNum"></el-input>
                        </el-form-item>
                        <el-form-item label="楼层号" prop="storeyNum">
                            <el-input id="white_list_info_pro_product_nbr" v-model="form.storeyNum"></el-input>
                        </el-form-item>
                        <el-form-item label="房号" prop="homeNum">
                            <el-input id="white_list_info_pro_product_name" v-model="form.homeNum"></el-input>
                        </el-form-item>
                        <el-form-item label="住客姓名" prop="homeName">
                            <el-input id="white_list_info_pro_product_userName" v-model="form.homeName" @click.native="sendName"></el-input>
<!--                            <el-input v-model="form.homeName" disabled v-else></el-input>-->
                        </el-form-item>
                        <el-form-item label="状态" prop="homeStatus">
                            <el-select id="white_list_info_common_regions" v-model="form.homeStatus">
                                <el-option
                                        v-for="item in statusList"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-col>
                        <el-tooltip class="item" effect="light"  placement="top" with="50" >
                            <div slot="content" with="50"  style="line-height:18px" >
                                可填写房屋的详细信息介绍：<br/>
                                1.房屋的基本信息<br/>
                                2.房屋的成员信息<br/>
                                3.房屋的设备信息<br/>
                                4.房屋未来的规划填报
                            </div>
                            <i class="el-icon-question" style="color:deepSkyblue;margin-left: 75px;position: absolute;margin-top: 8px"></i>
                        </el-tooltip>
                            <el-form-item label="房屋信息"  prop="homeMessage" style="width: 97%">
                                <el-input :rows="6" type="textarea" v-model="form.homeMessage" placeholder="请填写房屋信息"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col>
                        <el-tooltip class="item" effect="light"  placement="top" with="50" >
                            <div slot="content" with="50"  style="line-height:18px" >
                                可对家庭成员的信息实时录入：<br/>
                                1.家庭的主要成员<br/>
                                2.家庭的主要成员的信息填报<br/>
                                3.家庭成员的健康信息状况<br/>
                                4.家庭成员每日健康体温检测填写
                            </div>
                            <i class="el-icon-question" style="color:deepSkyblue;margin-left: 75px;position: absolute;margin-top: 8px"></i>
                        </el-tooltip>
                        <el-form-item label="家庭成员" prop="homeSuggestion" style="width: 97%">
                            <el-input :rows="6" type="textarea" v-model="form.homeSuggestion" placeholder="请填写家庭成员" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        </el-col>
                    </div>
                    <div class="title">智能设备</div>
                    <div class="form">
                        <el-form-item label="洗衣机数量" prop="washnum">
                            <el-input v-model="form.washnum" ></el-input>
                        </el-form-item>
                        <el-form-item label="WI-FI名称" prop="wifiname">
                            <el-input v-model="form.wifiname" ></el-input>
                        </el-form-item>
                        <el-form-item label="空调数量" prop="airnum">
                            <el-input v-model="form.airnum"></el-input>
                        </el-form-item>
                        <el-form-item label="智能设备状态" prop="smartstatus">
                            <el-select v-model="form.smartstatus">
                                <el-option
                                        v-for="item in smartstatusList"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="title">家居设备</div>
                    <div class="form">
                        <el-form-item label="书桌数量" prop="homedesk">
                            <el-input v-model="form.homedesk"></el-input>
                        </el-form-item>
                        <el-form-item label="椅子数量" prop="homechair">
                            <el-input v-model="form.homechair"></el-input>
                        </el-form-item>
                        <el-form-item label="衣橱数量" prop="homeclothes">
                            <el-input v-model="form.homeclothes"></el-input>
                        </el-form-item>
                        <el-form-item label="家居设备状态" prop="familystatus">
                            <el-select v-model="form.familystatus">
                                <el-option
                                        v-for="item in familystatusList"
                                        :key="item.value"
                                        :label="item.text"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="submit">
                    <el-button type="success" @click="save" :loading="addLoading">保存</el-button>
                    <el-button type="primary" @click="back">返回</el-button>
                </div>
            </div>
        </div>
        <num-dialog ref="numDialog" @sendMessage="showDialog"></num-dialog>
    </div>
</template>

<script>
    import numDialog from "./numDialog";
    export default {
        name: "numAdd",
        components: {numDialog},
        data(){
            return{
                addLoading: false,
                form:{
                    homeStatus: '',
                    unitName: '',
                    storeyNum:'',
                    buildNum: '',
                    homeNum: '',
                    homeName: '',
                    homeMessage:'',
                    homeSuggestion:'',
                    airnum:'',
                    wifiname:'',
                    washnum:'',
                    smartstatus:'',
                    homedesk:'',
                    homechair:'',
                    homeclothes:'',
                    familystatus:'',

                    homeaddress: ''
                },
                // homeStatusArr:{
                //   1: '已入住',
                //   2: '未入住',
                // },
                // statusArr:{
                //     1: '完好',
                //     2: '待维修',
                // },

                statusList:[
                    {
                        value: 1,
                        text: '已入住',
                    },
                    {
                        value: 2,
                        text: '未入住',
                    }
                ],
                smartstatusList:[
                    {
                        value: 1,
                        text: '完好',
                    },
                    {
                        value: 2,
                        text: '待维修',
                    }
                ],
                familystatusList:[
                    {
                        value: 1,
                        text: '完好',
                    },
                    {
                        value: 2,
                        text: '待维修',
                    }
                ],
                // 校验规则
                rules:{
                    unitName:[
                        {required: true, message: '单元名称不能为空', trigger: 'blur'}
                    ],
                    buildNum:[
                        {required: true, message: '幢号不能为空', trigger: 'blur'}
                    ],
                    homeNum:[
                        {required: true, message: '楼层号不能为空', trigger: 'blur'}
                    ],
                    storeyNum:[
                        {required: true, message: '房号不能为空', trigger: 'blur'}
                    ],
                    homeName:[
                        {required: true, message: '住客姓名不能为空', trigger: 'blur'}
                    ],
                    homeStatus:[
                        {required: true, message: '房号状态不能为空', trigger: 'change'}
                    ],
                    homeMessage:[
                        {required: true, message: '房屋信息不能为空', trigger: 'blur'}
                    ],
                    homeSuggestion:[
                        {required: true, message: '家庭成员不能为空', trigger: 'blur'}
                    ],
                    washnum:[
                        {required: true, message: '洗衣机数量不能为空', trigger: 'blur'}
                    ],
                    wifiname:[
                        {required: true, message: 'wifi名不能为空', trigger: 'blur'}
                    ],
                    airnum:[
                        {required: true, message: '空调数不能为空', trigger: 'blur'}
                    ],
                    smartstatus:[
                        {required: true, message: '智能设备状态不能为空', trigger: 'change'}
                    ],
                    homedesk:[
                        {required: true, message: '书桌数不能为空', trigger: 'blur'}
                    ],
                    homechair:[
                        {required: true, message: '椅子数不能为空', trigger: 'blur'}
                    ],
                    homeclothes:[
                        {required: true, message: '衣柜数不能为空', trigger: 'blur'}
                    ],
                    familystatus:[
                        {required: true, message: '家居设备状态不能为空', trigger: 'change'}
                    ],
                },
                dialogTableVisible: false,
            }
        },
        created(){
            // this.$axiosToken({
            //     url: '/users/getUserByToken',
            //     method: 'get',
            //     data: {},
            //     success:(result=>{
            //         this.type = result.type
            //     })
            // });
        },
        mounted(){
            this.getId();
            this.getDetail()
        },
        methods:{
            // 接收上个页面传来的id
            getId(){
                this.editId = this.$route.query.editId
            },
            back(){
                // 返回
                this.$router.go(-1)
            },
            // 获取详细信息
            getDetail(){
                console.log(this.detailId,'获取id')
                const id = this.editId
                // console.log(this.result,1111)
                this.$axiosToken({
                    url: '/house/getDetailId',
                    method: 'get',
                    data:{id},
                    success:(result)=>{
                        this.form.unitName = result[0].unitname;
                        this.form.buildNum = result[0].buildnum;
                        this.form.storeyNum = result[0].storeynum;
                        this.form.homeNum = result[0].homenum;
                        this.form.homeName = result[0].homename;
                        this.form.homeStatus = result[0].homestatus;
                        this.form.homeMessage = result[0].homemessage;
                        this.form.homeSuggestion = result[0].homesuggestion;
                        this.form.airnum = result[0].airnum;
                        this.form.wifiname = result[0].wifiname;
                        this.form.washnum = result[0].washnum;
                        this.form.smartstatus = result[0].smartstatus;
                        this.form.homedesk = result[0].homedesk;
                        this.form.homechair = result[0].homechair;
                        this.form.homeclothes = result[0].homeclothes;
                        this.form.familystatus = result[0].familystatus;

                        // this.status转化为文字
                        // this.addDetail.unitStatus = this.status[result[0].unitstatus];
                        // this.addDetail.unitContext = result[0].unitcontext;
                        // console.log(this.addDetail,1111)
                    },

                })
            },

            // 传住客姓名
            sendName(){
                this.$refs.numDialog.dialogTableVisible = true
                this.$refs.numDialog.h_id = this.editId
            },
            // 获取子组件传来的值
            showDialog(data){
                this.form.homeName = data[0].username;
                console.log(data)
            },
            // data参数
            getParams(){
                this.form.homeaddress ="滨江壹号"+this.form.unitName+this.form.buildNum+this.form.homeNum;
                let params = {
                    id: this.editId,
                    unitname: this.form.unitName,
                    buildnum: this.form.buildNum,
                    storeynum: this.form.storeyNum,
                    homenum: this.form.homeNum,
                    homename: this.form.homeName,
                    homestatus: this.form.homeStatus,
                    homemessage: this.form.homeMessage,
                    homesuggestion: this.form.homeSuggestion,
                    airnum: this.form.airnum,
                    wifiname: this.form.wifiname,
                    washnum: this.form.washnum,
                    smartstatus: this.form.smartstatus,
                    homedesk: this.form.homedesk,
                    homechair: this.form.homechair,
                    homeclothes: this.form.homeclothes,
                    familystatus: this.form.familystatus,

                    //给用户更新房屋信息
                    h_id: this.editId,
                    homeaddress: this.form.homeaddress,
                };
                return params
            },
            // 保存
            save() {
                this.$refs['form'].validate((valid)=>{
                    if (!valid){
                        this.$message.error({
                            message: "录入信息不能为空",
                            duration: 2000
                        });
                    } else {
                        this.$confirm('确定保存该房号消息？','提示',{
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(()=>{
                            this.addLoading =true
                            this.$axiosToken({
                                url: '/house/updatenumList',
                                method: 'post',
                                data:this.getParams(),
                                success: (result)=>{
                                    this.$message({
                                        showClose: true,
                                        message: '房号设备信息更新成功',
                                        type: 'success'
                                    });
                                    setTimeout(() => {
                                        this.addLoading = false;
                                    }, 1000);
                                    this.$router.go(-1)
                                }
                            });
                        }).catch(()=>{
                            this.$message({
                                type: 'info',
                                message: '已取消保存',
                                duration: 2000
                            });
                        })
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        margin-left: 5px;
    }
    .title::before{
        content: '';
        border-left: 5px solid #20a0ff;
        padding-right: 8px;
        /*display: inline-block;*/
        /*width: 5px;*/
        /*height: 22px;*/
        /*background-color: #389af9;*/
        /*vertical-align: middle;*/
    }
    .form{
        display: flex;
        flex-wrap: wrap;
        width: 96%;
        margin-left: 20px;
    }
    .el-form-item{
        width: 47%;
        padding-left: 3%;
    }
    .el-input{
        width: 100%;
    }
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    .el-select{
        width: 100%;
    }
    /deep/ .el-input{
        width: 100%;
    }
    .submit{
        margin-right: 40px;
        float: right;
    }
</style>